<template>
  <view class="bg">
    <view v-show="current == 1">
      <view class="top_bg"></view>
      <view class="wrap">
        <view class="username">
          <image src="../../static/images/DCXT/user.png" mode="" />{{
            username
          }}</view
        >
        <u-swiper
          :list="list"
          height="320"
          indicator-pos="bottomRight"
          :title="true"
        ></u-swiper>
      </view>
      <view>
        <view class="sub_title">工作台</view>
        <view class="loadingtop">
          <u-loading mode="flower" size="80" :show="showLoad"></u-loading
        ></view>
        <view class="function_bg">
          <view
            class="function_one"
            v-for="(item, index) in functionArr"
            :key="index"
            @click="jump(item.path)"
            v-show="item.show"
          >
            <image :src="iconUrl(item.icon)" mode=""></image>
            <view>{{ item.name }}</view>
            <view
              class="count"
              v-if="
                (item.name == '未签收' && count.unsign != 0) ||
                (item.name == '未反馈' && count.unback != 0)
              "
              >{{ item.name == "未签收" ? count.unsign : count.unback }}</view
            >
            <view
              class="count"
              v-if="nbrwNumber != 0 && item.name == '内部任务'"
              >{{ nbrwNumber }}</view
            >
          </view>
        </view>
      </view>
    </view>

    <!-- 另一个页面 -->
    <view v-show="current == 0 && xldshow == true">
      <view class="dcxm_container">
        <!-- <u-picker
          v-model="ifShowYearPicker"
          mode="time"
          :params="yearPickerParams"
          @confirm="confirmYearPicker"
        ></u-picker> -->

        <YearPicker
          pickerMode="time"
          :yearPickerParams="{ year: true }"
          :ifShowYearPicker="ifShowYearPicker"
          @yearDataFromSon="yearDataFromSon"
        />

        <view class="top_wrapper">
          <view class="pdlr">
            <view class="top_bar_box">
              <view
                v-for="(item, index) in topBarList"
                :key="index"
                class="top_bar_item"
              >
                <image :src="item.icon" class="icon_bar" mode="" />
                <view>
                  <view class="text">{{ item.text }}</view>
                  <view class="num">{{ item.num }}</view>
                </view>
              </view>
            </view>
          </view>

          <view class="top_list_title">项目类型占比</view>

          <view class="progress_List">
            <view
              class="progress_item"
              v-for="(item, index) in progressList"
              :key="index"
            >
              <view class="progress_text">
                <view>
                  <text class="name">{{ item.name }}</text>
                  <text class="percent">{{ item.rate }}%</text>
                </view>
                <view class="value">{{ item.value }}</view>
              </view>
              <view class="progress">
                <view
                  class="progress-done"
                  :style="{ width: item.percent + '%' }"
                ></view>
              </view>
            </view>
          </view>
        </view>

        <view class="bot_wrapper">
          <view class="pdlr">
            <view class="bot_bar_box">
              <view
                v-for="(item, index) in botBarList"
                :key="index"
                class="bot_bar_item"
              >
                <image :src="item.icon" class="icon_bar" mode="" />
                <view>
                  <view class="text">{{ item.text }}</view>
                  <view class="num">{{ item.num }}</view>
                </view>
              </view>
            </view>
          </view>

          <view class="bot_list_box">
            <view class="bot_list_title">年度逾期排名前五单位</view>
            <view class="picker_year" @tap="choosePicker">
              <text>{{ currentYear }}年</text>
            </view>
          </view>

          <view class="list_table">
            <view class="table_header">
              <view class="text">单位</view>
              <view class="text">排名</view>
            </view>

            <view class="table_body">
              <view
                class="table_row"
                v-for="(item, index) in rankList"
                :key="index"
              >
                <view class="unit">{{ item.unit }}</view>
                <view :class="['rank', index < 3 ? 'active' : '']">{{
                  item.rank
                }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <u-tabbar
      v-show="xldshow == true"
      v-model="current"
      :list="listabc"
      @change="changeTabbar"
    ></u-tabbar>
  </view>
</template>

<script>
import {
  getTaskCount,
  getTaskNum,
  getTaskcatenum,
  getWeektask,
  getOverduedept,
  insideTaskList,
} from "../../request/dcxt";
// import { mixin } from "@/static/js/mixin/yearPicker.js";
import YearPicker from "@/components/common/yearPicker";
export default {
  // mixins: [mixin],
  components: { YearPicker },
  data() {
    return {
      username: "",
      current: 0,
      nbrwNumber: 0,
      showLoad: false,
      listabc: [
        {
          iconPath: "home",
          selectedIconPath: "home-fill",
          text: "首页",
          customIcon: false,
        },
        {
          iconPath: "grid",
          selectedIconPath: "grid-fill",
          text: "工作台",
          customIcon: false,
        },
      ],
      functionArr: [
        {
          name: "未签收",
          icon: "Frame1",
          path: "/pages/dcxt/unreceive/index?type=0",
          show: true,
        },
        {
          name: "未反馈",
          icon: "Frame2",
          path: "/pages/dcxt/unreceive/index?type=1",
          show: true,
        },
        {
          name: "已反馈",
          icon: "Frame3",
          path: "/pages/dcxt/unreceive/index?type=2",
          show: true,
        },
        {
          name: "任务管理",
          icon: "Frame4",
          path: "/pages/dcxt/management/index",
          show: false,
        },
        {
          name: "攻坚任务管理",
          icon: "Frame4",
          path: "/pages/dcxt/gjrwgl/index",
          show: false,
        },
        {
          name: "立项",
          icon: "Frame5",
          path: "/pages/dcxt/project/index",
          show: false,
        },
        {
          name: "单位内部立项",
          icon: "Frame6",
          path: "/pages/dcxt/dwnblx/index",
          show: false,
        },
        {
          name: "绩效评分",
          icon: "Frame7",
          path: "jixiaopingfen",
          show: false,
        },
        {
          name: "汇总统计",
          icon: "Frame8",
          path: "/pages/dcxt/choose/index",
          show: false,
        },
        {
          name: "内部立项",
          icon: "Frame6",
          path: "/pages/dcxt/nblx/index",
          show: true,
        },
        {
          name: "内部任务",
          icon: "Framenbrw",
          path: "/pages/dcxt/nbrw/index",
          show: true,
        },
      ],
      list: [
        {
          image: "../../static/image/lunbo/image1.png",
          title: "",
        },
        {
          image: "../../static/image/lunbo/image2.png",
          title: "",
        },
        {
          image: "../../static/image/lunbo/image3.png",
          title: "",
        },
      ],
      count: {},

      // 另一个页面的
      topBarList: [
        {
          icon: "../../static/images/DCXT/dcxm/pfxm.png",
          text: "派发项目",
          num: "",
        },
        {
          icon: "../../static/images/DCXT/dcxm/wcxm.png",
          text: "完成项目",
          num: "",
        },
      ],

      progressList: [],

      botBarList: [
        {
          icon: "../../static/images/DCXT/dcxm/bzfk.png",
          text: "总数",
          num: "",
        },
        {
          icon: "../../static/images/DCXT/dcxm/yqsl.png",
          text: "已反馈",
          num: "",
        },
      ],

      rankList: [],
      currentYear: new Date().getFullYear(),
      ifShowYearPicker: false,
      xldshow: true,
    };
  },
  onLoad(option) {
    // 获取未签收，未反馈的数量统计
    //   this.getData();
    // 登录角色
    this.username = option.username;
  },
  onShow() {
    this.showLoad = true;
    // 获取未签收，未反馈的数量统计
    // 01县领导
    if (uni.getStorageSync("roleId") != "01") {
      this.xldshow = false;
      this.current = 1;
    } else {
      this.functionArr[5].show = true;
      this.functionArr[6].show = true;
      this.functionArr[7].show = true;
    }
    setTimeout(() => {
      // 02 主要领导
      // 03 分管领导
      // 04 经办人
      if (
        uni.getStorageSync("roleId") == "02" ||
        uni.getStorageSync("roleId") == "04" ||
        uni.getStorageSync("roleId") == "03"
      ) {
      }
      // 是否督查组
      if (uni.getStorageSync("userType") == 0) {
      } else if (uni.getStorageSync("userType") == 1) {
        this.functionArr[3].show = true;
        this.functionArr[5].show = true;
        this.functionArr[6].show = true;
        this.functionArr[7].show = true;
      } else if (uni.getStorageSync("userType") == 2) {
        this.functionArr[4].show = true;
      }
      // 管理员
      if (uni.getStorageSync("loginId") == "20201128100000001316") {
        for (let i = 0; i < this.functionArr.length; i++) {
          this.functionArr[i].show = true;
        }
        this.xldshow = true;
        this.current = 0;
      }
      // 5.10立项暂时不要
      this.functionArr[5].show = false;
      // 5.12去掉单位内部立项
      this.functionArr[6].show = false;
      this.getData();
      this.showLoad = false;
    }, 1000);
  },
  // onLoad() {
  //   // 01县领导
  //   if (uni.getStorageSync("roleId") != "01") {
  //     this.xldshow = false;
  //     this.current = 1;
  //   } else {
  //     this.functionArr[5].show = true;
  //     this.functionArr[6].show = true;
  //   }
  //   // 02 主要领导
  //   // 03 分管领导
  //   // 04 经办人
  //   if (
  //     uni.getStorageSync("roleId") == "02" ||
  //     uni.getStorageSync("roleId") == "04" ||
  //     uni.getStorageSync("roleId") == "03"
  //   ) {
  //   }
  //   // 是否督查组
  //   if (uni.getStorageSync("userType") == 0) {
  //   } else if (uni.getStorageSync("userType") == 1) {
  //     console.log("111111111111");
  //     this.functionArr[3].show = true;
  //     this.functionArr[5].show = true;
  //     this.functionArr[6].show = true;
  //     this.functionArr[7].show = true;
  //   } else if (uni.getStorageSync("userType") == 2) {
  //     console.log("111111111111");
  //     this.functionArr[4].show = true;
  //   }
  //   // 管理员
  //   if (uni.getStorageSync("loginId") == "18065583199") {
  //     for (let i = 0; i < this.functionArr.length; i++) {
  //       this.functionArr[i].show = true;
  //       this.xldshow = true;
  //       this.current = 0;
  //     }
  //   }
  // },
  methods: {
    //日期选择 显隐
    choosePicker() {
      this.ifShowYearPicker = true;
    },
    //日期选择 监听组件传回的值
    yearDataFromSon(val) {
      this.currentYear = val;
      this.ifShowYearPicker = false;
      // 年度逾期单位
      this.getTheOverduedept();
    },
    //切换底部tabbar
    changeTabbar(e) {
      this.current = e;
    },
    iconUrl(icon) {
      return require("../../static/images/DCXT/home/" + icon + ".png");
    },
    jump(path) {
      if (
        path == "/pages/dcxt/project/index" ||
        path == "/pages/dcxt/dwnblx/index" ||
        path == "jixiaopingfen"
      ) {
        this.$refs.uToast.show({
          title: "功能待完善!",
          type: "error",
          duration: 1000,
        });
      } else {
        uni.navigateTo({
          url: path,
        });
      }
    },
    getData() {
      var params = {
        loginerId: uni.getStorageSync("loginId"),
      };
      // 未签收未反馈数量
      getTaskCount(params).then((res) => {
        this.count = res.data.data;
      });
      // 派发项目/完成项目
      getTaskNum().then((res) => {
        this.topBarList[0].num = res.data.data.total;
        this.topBarList[1].num = res.data.data.finish;
      });
      // 事项类型统计
      getTaskcatenum().then((res) => {
        var result = res.data.data;
        var arr = [];
        for (let i = 0; i < result.length; i++) {
          arr.push({
            name: result[i].codeTexts,
            percent: result[i].rate,
            value: result[i].nums,
            rate: result[i].rate,
          });
        }
        this.progressList = JSON.parse(JSON.stringify(arr));
      });
      getWeektask().then((res) => {
        this.botBarList[0].num = res.data.data.total;
        this.botBarList[1].num = res.data.data.finish;
      });
      // 年度逾期单位
      this.getTheOverduedept();
      // 内部任务是否有未签收
      insideTaskList({
        loginerId: uni.getStorageSync("loginId"),
        taskState: 0,
      }).then((res) => {
        if (res.data.data.total) {
          this.nbrwNumber = res.data.data.total;
        }
      });
    },
    // 年度逾期单位
    getTheOverduedept() {
      getOverduedept({ year: this.currentYear }).then((res) => {
        var result = res.data.data;
        console.log(result);
        var arr = [];
        if (result) {
          for (let i = 0; i < result.length; i++) {
            arr.push({
              unit: result[i].deptName,
              rank: result[i].overTimes,
            });
          }
          this.rankList = JSON.parse(JSON.stringify(arr));
        } else {
          this.rankList = [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.loadingtop {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}
.top_bg {
  width: 100%;
  height: 250rpx;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../../static/images/common/topBg.png) no-repeat;
  background-size: 100% 100%;
}

.wrap {
  margin: 30rpx 0;
  padding-top: 50rpx;
  position: relative;

  .username {
    position: absolute;
    top: -20rpx;
    left: 0;
    font-size: 35rpx;
    color: white;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    image {
      width: 60rpx;
      height: 50rpx;
      margin-right: 10rpx;
    }
  }
}

.function_bg {
  width: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20rpx 0;

  .function_one {
    width: 33.33%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20rpx 0;
    position: relative;

    image {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 15rpx;
    }
    .count {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 50%;
      background-color: red;
      text-align: center;
      color: white;
      position: absolute;
      font-size: 18rpx;
      right: 50rpx;
      top: -15rpx;
    }
  }
}

// 另一个页面的
.dcxm_container {
  background: #f5f6fa;

  .top_wrapper,
  .bot_wrapper {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
    border-radius: 8rpx;
    margin: 20rpx auto;
    padding-bottom: 40rpx;

    .pdlr {
      padding: 0 25rpx;
    }
    .top_bar_box,
    .bot_bar_box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1px solid #e7e9f0;

      .top_bar_item,
      .bot_bar_item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 50%;
        &:nth-child(1) {
          border-right: 1px solid #e7e9f0;
        }
        &:nth-child(2) {
          padding-left: 20rpx;
        }

        .icon_bar {
          width: 60rpx;
          height: 60rpx;
          display: block;
          margin-right: 20rpx;
        }

        .text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #8e9cb3;
        }

        .num {
          font-size: 34rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #272b32;
        }
      }
    }

    .top_list_title {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
      padding: 25rpx;
    }

    // 进度条
    .progress_List {
      padding: 0 25rpx;
      .progress_item {
        width: 100%;
        box-sizing: border-box;

        .progress_text {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx 0;

          .name {
            font-size: 28rpx;
            font-weight: 500;
            color: #272b32;
            margin-right: 20rpx;
          }

          .percent {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #8e9cb3;
          }

          .value {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #272b32;
          }
          //   .percentStyle_up {
          //     font-size: 14rpx;
          //     font-weight: bold;
          //     color: #e65762;
          //   }

          //   .percentStyle_down {
          //     font-size: 14rpx;
          //     font-weight: bold;
          //     color: #31b590;
          //   }
        }

        // 进度条
        .progress {
          background-color: rgba(100, 100, 100, 0.2);
          border-radius: 5rpx;
          position: relative;
          height: 10rpx;
          width: 100%;
        }

        .progress-done {
          //   background: linear-gradient(
          //     to right,
          //     rgba(59, 143, 246, 0.3),
          //     rgba(59, 143, 246, 1)
          //   );
          background: #3074ff;
          // box-shadow: 0 3px 3px -5px rgb(242, 112, 156), 0 2px 5px rgb(242, 112, 156);
          border-radius: 5rpx;
          height: 10rpx;
          width: 0;
          transition: width 1s ease 0.3s;
        }
      }
    }
  }

  .bot_list_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx;
    .bot_list_title {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
    }

    .picker_year {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #3074ff;
      padding-right: 30rpx;
      position: relative;
      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        content: "";
        width: 0;
        height: 0;
        border-right: 8rpx solid transparent;
        border-left: 8rpx solid transparent;
        border-top: 10rpx solid #3074ff;
      }
    }
  }

  .list_table {
    .table_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 25rpx;
      .text {
        width: 50%;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8e9cb3;
        border-bottom: 1px solid #e7e9f0;
        padding: 25rpx 0;
        &:nth-child(1) {
          padding-left: 50rpx;
        }

        &:nth-child(2) {
          padding-left: 30rpx;
          text-align: center;
        }
      }
    }

    .table_body {
      padding: 0 25rpx;
      .table_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 50rpx;
        border-bottom: 1px solid #e7e9f0;
        .unit {
          padding: 25rpx 0;
          width: 50%;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #272b32;
          line-height: 36px;
        }

        .active {
          color: #faad33 !important;
        }
        .rank {
          width: 50%;
          font-size: 34rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #8e9cb3;
          text-align: center;
          padding: 25rpx 0;
        }
      }
    }
  }
}
</style>
